<template>
  <el-row>
    <el-col :span="24">
      <h3 style="margin: 12px 0">物资送货单</h3>
    </el-col>
    <el-col :span="24" style="text-align: center">
      <ElButton type="primary" @click="refreshBtn()" :loading="state.loading">
        获取数据
      </ElButton>
    </el-col>
  </el-row>
</template>
<script setup>
import { ref, onMounted } from "vue";
let state = ref({
  /** 数据状态 */
  loading: false,
  msg: "",
  /** 操所人 */
  waterName: "操作人",
  /** 供货商 */
  gonghuoDw: "",
  tableData: [
    {
      title:
        "ZKH/震坤行 GB5783套件 外六角螺栓套件 碳钢 8.8级 发黑 全牙 配1螺母1平垫1弹垫 M22×100 1套",
      code: "210905150000261",
      num: "50.0000"
    },
    {
      title:
        "ZKH/震坤行 GB5783套件 外六角螺栓套件 碳钢 8.8级 发黑 全牙 配1螺母1平垫1弹垫 M22×100 1套",
      code: "210905150000261",
      num: "50.0000"
    },
    {
      title:
        "ZKH/震坤行 GB5783套件 外六角螺栓套件 碳钢 8.8级 发黑 全牙 配1螺母1平垫1弹垫 M22×100 1套",
      code: "210905150000261",
      num: "50.0000"
    },
    {
      title:
        "ZKH/震坤行 GB5783套件 外六角螺栓套件 碳钢 8.8级 发黑 全牙 配1螺母1平垫1弹垫 M22×100 1套",
      code: "210905150000261",
      num: "50.0000"
    }
  ]
});
/** 生命周期 */
onMounted(() => {
  // 原有消息监听保持不变
  // @ts-ignore
  chrome.runtime.onMessage.addListener(message => {
    if (message.type === "hotsearch_data") {
      // const container = document.getElementById('results');
      console.log("接收到的数据", message.data);
      // state.value.tableData = message.data ?? [];
      // state.value.gonghuoDw = message.gonghuoDw ?? "";
      state.value.loading = false;
    }
  });
});
/** 在 popup.js 中添加加载状态 */
function showLoading() {
  state.value.msg = "加载中...";
}
function refreshBtn() {
  console.log("重新获取数据");
  state.value.loading = true;

  // 获取当前活动标签页
  showLoading();
  // @ts-ignore
  chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
    if (tabs[0].url.includes("zcpt.zgpmsm.com.cn")) {
      // 向内容脚本发送刷新指令
      // @ts-ignore
      chrome.tabs.sendMessage(tabs[0].id, { type: "manual_refresh" });
    } else {
      alert(
        "请在http://zcpt.zgpmsm.com.cn/TPFrame/customframe4bid/login_TP页面使用此功能！"
      );
    }
  });
}
</script>
<style scoped></style>
